<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			
			.box1 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				float: left;
			}
			
			.box2 {
				width: 200px;
				height: 200px;
				background-color: orange;
				/*
					开启了BFC,开启BFC之后,不会再被浮动的元素所覆盖
				*/
				overflow: hidden;
			}
			
			
			/*
				开启BFC之后,子元素设置外边距不会和父元素重叠
			*/
			.box3 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				overflow: hidden;
			}
			
			.box4 {
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				margin-top: 100px;
			}
		
		</style>
	</head>
	<body>
		<div class="box1">
		
		</div>
		
		<div class="box2"></div>
		
		
		<div class="box3">
			<div class="box4"></div>
		</div>
	
	</body>
</html>
